<template>
  <div>
    <Content>
      <!--商品轮播  -->
      <div class="swiper-top">
        <Swiper :bannerList="bannerList"></Swiper>
      </div>

      <!-- 返回按钮 -->
      <div class="swiper-top-back" @click="onClickBack">
        <img src="../../assets/navigation/back.png" />
      </div>

      <!-- 商品介绍 -->
      <p class="good-name">{{ shopcarList.basicInfo.name }}</p>
      <p class="good-char">{{ shopcarList.basicInfo.characteristic }}</p>
      <p class="good-price">
        <span class="price1">低价￥{{ shopcarList.basicInfo.pingtuanPrice }}</span>
        <span class="price2"><del>原价￥{{ shopcarList.basicInfo.pingtuanPrice }}</del></span>
      </p>

      <!-- 商品详情 -->
      <div class="good-content" v-html="shopcarList.content"></div>

      <!--底部导航  -->
      <div class="recommend-bottom">
        <van-goods-action>
          <van-goods-action-icon icon="chat-o" text="客服"/>
          <van-goods-action-icon icon="cart-o" text="购物车" @click="onClickCar"/>
          <van-goods-action-icon icon="shop-o" text="店铺" badge="0"/>
          <van-goods-action-button type="warning" text="加入购物车" @click="showCart=true"/>
          <van-goods-action-button type="danger" text="立即购买" />
        </van-goods-action>
      </div>

      <!-- 加入购物车内容框 -->
      <van-action-sheet v-model="showCart" @select="onSelectOff">
        <div class="content">
          <div class="gocar_container">
            <van-card :price="shopcarList.basicInfo.originalPrice" :desc="shopcarList.basicInfo.characteristic" :title="shopcarList.basicInfo.name" :thumb="shopcarList.basicInfo.pic">
            </van-card>
          </div>
          <div class="good-size"></div>
          <div class="good-count">
              <div class="count-title">购买数量</div>
              <div class="count-stepper"><van-stepper @plus="plus(item)" @minus="min(item)" /></div>
          </div>
          <van-button class="add-cart-button" type="danger" @click="addcar(shopcarList)">加入购物车</van-button>
        </div>
      </van-action-sheet>

    </Content>
  </div>
</template>
<script>
import Content from "../../components/content/Content";
import Swiper from "../../components/swiper/Swiper";
import mixin from "../../store/mixin";

import Vue from "vue";

export default {
  mixins:[mixin],
  components: { Content, Swiper },
  data(){
    return {
      shopcarList: [],
      bannerList: [],
      value: 1,
      showCart:false,
    };
  },
  mounted() {
    this.$API.getRecommendDetail({ id: this.$route.query.id }).then((res) => {
      console.log(res);
      this.bannerList = res.data.data.pics;
      this.shopcarList = res.data.data;
    });
  },
  methods: {
    onClickBack() {
      window.history.go(-1);
    },
    onClickCart() {
      this.isShowCart = true;
    },
    onSelectOff(item){
        this.showCart=false;
    },
    onClickCar(){
        this.$router.push("/car");
    },
  },
};
</script>
<style scoped>
.swiper-top-back {
  width: 40px;
  height: 40px;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  position: fixed;
  top: 5px;
  left: 5px;
}
.swiper-top-back img {
  width: 90%;
  height: 90%;
}
.swiper-top {
  width: 100%;
  height: 50vh;
  /* border-bottom: 1px solid red; */
}
.recommend-bottom {
  width: 100%;
  height: 64px;
  position: fixed;
  bottom: 0px;
}
.good-name {
  margin-top: 12px;
  font-size: 0.7rem;
}
.good-char {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  margin-top: 15px;
  font-size: 0.6rem;
  color: gray;
}
.good-price {
  margin-top: 15px;
  font-size: 0.6rem;
}
.price1 {
  color: red;
}
.price2 {
  font-size: 0.5rem;
  color: grey;
  margin-left: 6px;
}
.add-cart-button {
  width: 100%;
  height: 40px;
  color: white;
  font-size: 0.72rem;
}
.good-size{
    width:100%;
    height:4rem;
    border-top:1px solid lightgrey;
    border-bottom:1px solid lightgrey;
}
.good-count{
    width:100%;
    height:3rem;
    border-top:1px solid lightgrey;
    border-bottom:1px solid lightgrey;
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
}
.count-title{
    width:20%;
    height:100%;
    font-size:0.6rem;
    /* background-color: cadetblue; */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.count-stepper{
    width:30%;
    height:100%;
    /* background-color:red; */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.good-content {
  width: 100%;
  font-size: 0.7rem;
  border-top: 0.8rem solid rgb(231, 230, 230);
}
.good-content >>> img {
  width: 100% !important;
  height: 3rem !important;
}
</style>